<template>
    <div class="app-content">
        <el-card class="search-card" shadow="never">
            <!-- 搜索部分 -->
            <el-row :gutter="10" class="search-section">
                <el-col :span="6">
                    <el-form-item label="租户ID：">
                        <el-input v-model="searchData.tenantId" placeholder="请输入租户ID" style="width: 240px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="租户名称：">
                        <el-input v-model="searchData.tenantName" placeholder="请输入用户名称" style="width: 240px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系人ID：">
                        <el-input v-model="searchData.contactId" placeholder="请输入手机号码" style="width: 240px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="权益">
                        <el-select v-model="searchData.rights" placeholder="请选择状态" style="width: 240px">
                            <el-option label="普通租户" value="1"></el-option>
                            <el-option label="系统租户" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="10" class="search-section2">
                <el-col :span="9">
                    <el-form-item label="创建时间：">
                        <div class="block">
                            <el-date-picker v-model="searchData.createTimeList" type="daterange" unlink-panels
                                range-separator=">>" start-placeholder="开始日期" end-placeholder="结束日期"
                                :shortcuts="shortcuts" />
                        </div>

                    </el-form-item>

                </el-col>
                <el-col :span="9">
                    <el-form-item label="到期时间：">
                        <div class="block">
                            <el-date-picker v-model="searchData.expireTimeList" type="daterange" unlink-panels
                                range-separator=">>" start-placeholder="开始日期" end-placeholder="结束日期"
                                :shortcuts="shortcuts" />
                        </div>

                    </el-form-item>

                </el-col>
                <el-col :span="6">
                    <el-button type="primary" class="action-button" @click="search" :icon="Search">搜索</el-button>
                    <el-button @click="reset" type="primary" class="action-button" :icon="Refresh">重置</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="search-card" shadow="never" style="margin-top: 10px;">
            <!-- 操作按钮组 --><!-- UNF VVV -->
            <div class="button-group">
                <el-button v-role="['ROLE_super']" class="action-button" type="primary" :icon="Edit" @click="handleAdd">增加</el-button>

                <el-button class="action-button" type="primary" :icon="Upload" @click="handleImport">导入</el-button>
                <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none"
                    accept=".xlsx,.xls,.csv" />
                <el-button class="action-button" type="primary" :icon="Download" @click="handleExport">导出</el-button>
                <el-button class="action-button" type="primary" :icon="Delete" :disabled="!hasSelected"
                    @click="handleBatchDelete" plain>
                    删除
                </el-button>
            </div>


            <!-- 数据表格 -->
            <el-table ref="tableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <!-- 多选框列 -->
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="tenantId" label="租户ID" width="110" />
                <el-table-column prop="tenantName" label="租户名" width="160" />
                <el-table-column prop="contactId" label="联系人ID：" width="130" />
                <el-table-column prop="rights" label="权益" width="130">
                    <template #default="scope">
                        {{ getRightsText(scope.row.rights) }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="220">
                    <template #default="scope">
                        {{ scope.row.createTime.replace(/T/, ' ') }}
                    </template>
                </el-table-column>
                <el-table-column prop="expireTime" label="到期时间" width="200">
                    <template #default="scope">
                        {{ scope.row.expireTime.replace(/T/, ' ') }}
                    </template>
                </el-table-column>
                <el-table-column prop="domain" label="域名" />
                <!-- 操作列 -->
                <el-table-column label="操作" width="250">
                    <template #default="scope">
                        <el-button class="table-button" text type="primary" :icon="EditPen"
                            @click="handleEdit(scope.$index, scope.row)">
                            编辑/详情</el-button>
                        <el-button class="table-button" text type="danger" :icon="Delete"
                            @click="handleRowDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination class="pagination-fixed" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                    :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next" :total="pagination.totalNum">

                </el-pagination>
            </div>
        </el-card>
        <!-- 新增对话框 -->
        <el-dialog v-model="dialogVisible" title="新增租户" width="600" :before-close="handleClose" @open="onOpen"
            @close="onClose" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
            <el-segmented v-model="segmentValue" :options="menuOptions" size="large" />

            <template #footer>
                <div class="dialog-footer">
                    <el-button class="action-button" type="info" @click="dialogVisible = false">取消</el-button>
                    <el-button class="action-button" type="primary" @click="update()">
                        确认
                    </el-button>
                </div>
            </template>

            <el-form ref="dialogForm" style="max-width: 600px; margin-left: 30px;" :model="tenantForm" :rules="rules"
                label-width="auto" class="el-form" status-icon>

                <div v-show="segmentValue === 'basic'">
                    <el-form-item label="租户名" prop="tenantName" required>
                        <el-input v-model="tenantForm.tenantName" style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="联系人ID" prop="contactId" required>
                        <el-input v-model="tenantForm.contactId" style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="域名" prop="domain">
                        <el-input v-model="tenantForm.domain" style="width: 200px;" />
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>

        <!-- 编辑对话框 -->
        <el-dialog v-model="dialogVisibleEdit" title="详情与编辑" width="600" :before-close="handleClose" @open="onOpen"
            @close="onClose" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
            <el-segmented v-model="segmentValueEdit" :options="menuOptionsEdit" size="large" />

            <template #footer>
                <div class="dialog-footer">
                    <el-button class="action-button" type="info" @click="handleCancel()">取消</el-button>
                    <el-button class="action-button" type="primary" @click="update()"><!-- UNF -->
                        确认
                    </el-button>
                </div>
            </template>

            <el-form ref="dialogFormEdit" style="max-width: 600px; margin-left: 30px;" :model="tenantForm"
                :rules="rules" label-width="auto" class="el-form" status-icon>

                <div v-show="segmentValueEdit === 'basic'">
                    <el-form-item label="租户ID" prop="tenantId">
                        <el-input v-model="tenantForm.tenantId" style="width: 221px;" disabled />
                    </el-form-item>
                    <el-form-item label="租户名" prop="tenantName" required>
                        <el-input v-model="tenantForm.tenantName" style="width: 221px;" />
                    </el-form-item>
                    <el-form-item label="联系人ID" prop="contactId" required>
                        <el-input v-model="tenantForm.contactId" style="width: 221px;" />
                    </el-form-item>
                    <el-form-item label="域名" prop="domain">
                        <el-input v-model="tenantForm.domain" style="width: 221px;" />
                    </el-form-item>
                    <el-form-item label="LOGO" prop="logo">
                        <el-input v-model="tenantForm.logo" style="width: 221px;" />
                    </el-form-item>
                    <el-form-item label="备注" prop="remark" >
                        <el-input type="textarea" v-model="tenantForm.remark" :rows="4" :autosize="true"  style="width: 221px;"/>
                    </el-form-item>
                    <el-form-item label="创建人ID" prop="createId">
                        <el-input v-model="tenantForm.createId" style="width: 221px;" disabled />
                    </el-form-item>
                    <el-form-item label="创建时间" prop="createTime">
                        <el-input v-model="dialogFormEditCreateTime" style="width: 221px;" disabled />
                    </el-form-item>
                    <el-form-item label="到期时间" prop="expireTime" required>
                        <el-input v-model="dialogFormEditExpireTime" style="width: 221px;" />
                    </el-form-item>
                    <!-- <el-form-item label="到期时间" prop="expireTime" required>
                        <div class="demo-date-picker">
                            <div class="block">
                                <el-date-picker
                                    v-model="tenantForm.expireTime"
                                    type="date"
                                    placeholder="Pick a day"
                                    :size="size"
                                />
                            </div>
                        </div>
                    </el-form-item> -->
                    <el-form-item label="最近一次更新人ID" prop="updateId">
                        <el-input v-model="tenantForm.updateId" style="width: 221px;" disabled />
                    </el-form-item>
                    <el-form-item label="最近一次更新时间" prop="updateTime">
                        <el-input v-model="dialogFormEditUpdateTime" style="width: 221px;" disabled />
                    </el-form-item>
                </div>
                <div v-show="segmentValueEdit === 'faculty'">
                    <el-button class="action-button" type="primary"
                        @click="jumpToUsers(tenantForm.tenantId as string)">点击跳转至对应用户管理界面</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import type { PaginationData } from '../../type/PaginationData';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { Delete, Edit, Search, Upload, Download, Refresh, EditPen } from '@element-plus/icons-vue'
import { findById } from '../../api/Tenant/tenantApi';
import { Tenant, TenantDTO } from '../../type/Tenant';
import { getTenantInfo, searchTenantInfo, fetchContactIds, addTenant, deleteTenant, deleteBatch, updateTenant, importTenantInfo, exportTenantInfo } from '../../api/Tenant/tenantApi';
import { useRouter } from 'vue-router';
import { setGlobalVar } from '../../config/globalVariables';


// 表格数据
const tableData = ref<Tenant[]>([]);
// 查询数据
const searchData = ref({
    tenantId: "",
    tenantName: "",
    contactId: "",
    rights: "",
    expireTimeList: [],
    createTimeList: []
});

//用户跳转
const router = useRouter();
//const globalVar = globalVariables;
const jumpToUsers = async (tenantId: string) => {
    await setGlobalVar(true, tenantId);
    router.push('/home/tenant/user');

}


//分页
const isSearch = ref(false); // 判断是否为搜索状态
const pagination = ref<PaginationData<Tenant>>({
    currentPage: 1,
    pageSize: 10,
    totalNum: 10,
    isMore: 0,
    totalPage: 0,
    startIndex: 0,
    items: []
});
//当每页条数发生了变化，调用此函数
const handleSizeChange = async (val: number) => {
    pagination.value.pageSize = val;
    pagination.value.currentPage = 1; // 切换每页条数时重置为第一页
    if (isSearch.value) {
        await search();  // 如果是搜索状态，调用搜索
    } else {
        await getTenantData();  // 否则调用常规获取数据
    }
};
//当前页码发生变化，调用此函数
const handleCurrentChange = async (val: number) => {
    pagination.value.currentPage = val;
    if (isSearch.value) {
        await search();  // 如果是搜索状态，调用搜索
    } else {
        await getTenantData();  // 否则调用常规获取数据
    }
};

// ---------------------
// 获取租户数据
const getTenantData = async () => {

    const res = await getTenantInfo(pagination.value?.currentPage, pagination.value?.pageSize);

    const data = res;

    // 更新表格数据
    tableData.value = data.items;

    // 更新分页信息
    pagination.value.currentPage = data.currentPage;
    pagination.value.pageSize = data.pageSize;
    pagination.value.totalNum = data.totalNum;
    pagination.value.isMore = data.isMore;
    pagination.value.totalPage = data.totalPage;
    pagination.value.startIndex = data.startIndex;

}
getTenantData();


getTenantData();
// 获取权益的中文表示
const getRightsText = (gender: string): string => {
    switch (gender) {
        case "1":
            return '普通租户';
        case "0":
            return '系统租户';
        default:
            return '普通租户';
    }
};

//日期选择器
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]


//------------搜索----------------
const search = async () => {
    isSearch.value = true;

    const res = await searchTenantInfo(pagination.value.currentPage, pagination.value.pageSize, searchData.value);

    // 更新表格数据
    tableData.value = res.items;

    // 更新分页信息
    pagination.value.currentPage = res.currentPage;
    pagination.value.pageSize = res.pageSize;
    pagination.value.totalNum = res.totalNum;
    pagination.value.isMore = res.isMore;
    pagination.value.totalPage = res.totalPage;
    pagination.value.startIndex = res.startIndex;
}
const reset = async () => {
    isSearch.value = false;
    searchData.value.tenantId = "";
    searchData.value.tenantName = "";
    searchData.value.contactId = "";
    searchData.value.rights = "";
    searchData.value.expireTimeList = [];
    searchData.value.createTimeList = [];
    await getTenantData();
}

// 处理顶部按钮操作
const handleAdd = async () => {
    console.log('增加按钮点击')
    dialogTitle.value = '新增租户'
    dialogVisible.value = true
    // 重置表单
    tenantForm.value = {}
    // 重置验证规则，避免触发验证 需要用setTimeout包裹
    setTimeout(() => {
        dialogForm.value?.clearValidate()
    }, 100)
    dialogType.value = true

}

//----------导入部分--------
const fileInput = ref<HTMLInputElement | null>(null);

// 触发文件输入
function handleImport() {
    fileInput.value?.click();
}
const handleFileUpload = async (event: Event) => {
    console.log('导入按钮点击')
    // 在此添加导入操作的逻辑
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);
        await importTenantInfo(formData);
        ElMessage.success('导入成功');
        // 重新获取数据
        await getTenantData();
    }
}

const handleExport = async () => {
    console.log('导出按钮点击')
    // 在此添加导出操作的逻辑
    await exportTenantInfo();
}

//------------------
// 管理选中行
const tableRef = ref<InstanceType<typeof import('element-plus')['ElTable']> | null>(null);
const selectedRows = ref<Tenant[]>([]);

// 监听选中行变化
const handleSelectionChange = (selection: Tenant[]) => {
    selectedRows.value = selection;
};

// 计算是否有选中行
const hasSelected = computed(() => selectedRows.value.length > 0);

// 批量删除处理函数
const handleBatchDelete = () => {
    if (selectedRows.value.length === 0) return;

    ElMessageBox.confirm(
        `确定删除选中的 ${selectedRows.value.length} 条数据吗?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            tableData.value = tableData.value.filter(
                (row) => !selectedRows.value.includes(row)
            );
            console.log('selectedRows.value', selectedRows.value)
            const ids: string[] = selectedRows.value.map((row) => row.tenantId as string);  // 类型断言，确保返回的都是 string 类型
            deleteBatch(ids)
            ElMessage.success('批量删除成功');
            // 清空选中
            selectedRows.value = [];
        })
        .catch(() => {
            ElMessage.info('已取消批量删除');
        });
};

//------------对话框----------------
const dialogVisible = ref(false)
const dialogVisibleEdit = ref(false)
// 在编辑的时候不可以选择租户dialogType:false，新增的时候可以选择租户 dialogType:true
const dialogType = ref(true)
const emit = defineEmits(['dialogUpdated']);
const onOpen = () => {
    emit('dialogUpdated', dialogVisible.value)
}
const onClose = () => {
    emit('dialogUpdated', dialogVisible.value)
}
const dialogTitle = ref('')
const handleClose = (done: () => void) => {
    dialogVisible.value = false
    // 重置验证规则，避免触发验证 需要用setTimeout包裹
    setTimeout(() => {
        dialogForm.value?.clearValidate()
    }, 100)
    done()
}
const segmentValue = ref('basic')
const segmentValueEdit = ref('basic')

const menuOptions = [
    {
        label: '基础信息',
        value: 'basic',
    }
]
const menuOptionsEdit = [
    {
        label: '基础信息',
        value: 'basic',
    },
    {
        label: '人员信息',
        value: 'faculty',
    }
]
//
const dialogForm = ref<FormInstance>()
const dialogFormEdit = ref<FormInstance>()
const tenantForm = ref<TenantDTO>({})
// 自定义验证函数  
const contactValid = async (contactId: any) => {
    const contactIds = await fetchContactIds();
    if (contactIds.includes(contactId)) {
        return true;
    } else {
        return false;
    }
}
const validateContactId = async (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请输入联系人ID'));
    } else {
        const isValid = await contactValid(value); // 调用 contactValid 并等待结果  
        if (!isValid) {
            callback(new Error('该联系人不存在'));
        } else {
            callback(); // 验证通过  
        }
    }
};
function isValidDateTime(input: string): boolean {
    // 定义正则表达式  
    const regex = /^(19|20)\d{2}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]) (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;

    // 测试输入是否匹配正则表达式  
    return regex.test(input);
}
const validateExpireTime = async (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请输入到期时间'));
    } else {
        if (!isValidDateTime(dialogFormEditExpireTime.value)) {
            callback(new Error('请用与创建时间一致的格式输入'));
            return;
        }
        dialogFormEditCreateTime.value = dialogFormEditCreateTime.value.replace(' ', 'T');
        dialogFormEditExpireTime.value = dialogFormEditExpireTime.value.replace(' ', 'T');
        const cTime = new Date(dialogFormEditCreateTime.value);
        const eTime = new Date(dialogFormEditExpireTime.value);
        dialogFormEditCreateTime.value = dialogFormEditCreateTime.value.replace(/T/, ' ');
        dialogFormEditExpireTime.value = dialogFormEditExpireTime.value.replace(/T/, ' ');
        if (eTime.getTime() < cTime.getTime() + 3600 * 1000 * 24 * 3) {
            callback(new Error('到期时间最早为创建日期3天后'));
        } else {
            callback(); // 验证通过  
        }
    }
};
const rules = reactive<FormRules<TenantDTO>>({
    tenantName: [
        { required: true, message: '请输入租户名', trigger: 'blur' },
    ],
    contactId: [
        { required: true, message: '请输入联系人ID', trigger: 'blur' },
        { validator: validateContactId, trigger: 'blur' } // 使用自定义验证函数 
    ],
    expireTime: [
        { required: true, message: '请输入到期时间', trigger: ['blur', 'change', 'focus'] },
        { validator: validateExpireTime, trigger: 'blur' } // 使用自定义验证函数 
    ]
});

// 编辑行的处理函数
const dialogFormEditCreateTime = ref('')
const dialogFormEditUpdateTime = ref('')
const dialogFormEditExpireTime = ref('')
const handleEdit = async (index:number,row: Tenant) => {
    dialogForm.value?.resetFields();
    // 编辑逻辑
    dialogTitle.value = '详情与编辑'
    dialogType.value = false
    dialogVisibleEdit.value = true

    tenantForm.value = row
    const tenant = await findById(row.tenantId || "");
    if (tenant) {
        dialogFormEditCreateTime.value = tenant.createTime?.replace(/T/, ' ')|| ''
        dialogFormEditUpdateTime.value = tenant.updateTime?.replace(/T/, ' ')|| ''
        dialogFormEditExpireTime.value = tenant.expireTime?.replace(/T/, ' ')|| ''
        // tenantForm.value.tenantName = tenant.tenantName;
        tenantForm.value = tenant;
        console.log('tenant', tenant)
    }

};
const update = async () => {
    try {
        const valid = await dialogForm.value?.validate();
        const validEdit = await dialogFormEdit.value?.validate();
        if (dialogType.value === false && validEdit) {
            // 更新逻辑
            dialogFormEditExpireTime.value = dialogFormEditExpireTime.value.replace(' ', 'T');
            tenantForm.value.expireTime = dialogFormEditExpireTime.value
            await updateTenant(tenantForm.value);
            await getTenantData();
            ElMessage.success('更新成功');
        } else if (dialogType.value === true && valid) {
            // 新增逻辑
            await addTenant(tenantForm.value);
            await getTenantData();
            ElMessage.success('新增成功');
        } else {
            // 验证失败的情况下，显示错误信息
            ElMessage.error('请检查输入项');
        }
    } catch (error) {
        // 捕获验证失败时的错误
        ElMessage.error('验证失败，请检查输入项');

    }
}
// 编辑对话框取消按钮操作
const handleCancel = async () => {
    // 重置表单
    tenantForm.value = {}
    dialogVisibleEdit.value = false
}

// 删除行的处理函数
const handleRowDelete = async (index: number, row: Tenant) => {

    ElMessageBox.confirm(`确定删除 ${row.tenantId} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {

            await deleteTenant(row)
            //ElMessage.success('删除成功');
            //await deleteBatchProject(res.data);
            ElMessage.success('删除成功');
            tableData.value.splice(index, 1);


        })
        .catch(() => {
            ElMessage.info('已取消删除');
        });
};

</script>
<style lang="scss" scoped>
@use "sass:color";
$primary-color: #6067eb;
$info-color: #dadcf6;
$button-border-radius: 4px;
$button-padding: 0.5rem 1rem;
$button-font-size: 16px;
$color-hover: color.adjust($primary-color, $lightness: -10%); // 悬浮时的颜色
$color-disabled: color.adjust($primary-color, $lightness: 15%); // 禁用时的颜色
$info-color-hover: color.adjust($info-color, $lightness: -25%); // 悬浮时的颜色

/* 定义一个 mixin 用于公共按钮样式 */
@mixin action-button-style {
    border-radius: $button-border-radius;
    padding: $button-padding;
    font-size: $button-font-size;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

    /* 覆盖 Element Plus 的 primary 按钮样式 */
    &.el-button--primary {
        background-color: $primary-color;
        border-color: $primary-color;
        color: #fff;

        &:hover,
        &:focus {
            background-color: $color-hover;
            border-color: $color-hover;
            color: #fff;
        }

        &.is-disabled {
            background-color: $color-disabled;
            border-color: $color-disabled;
            color: #fff;
            cursor: not-allowed;
            opacity: 1; // 确保颜色不被 Element Plus 默认的透明度覆盖
        }
    }

    &.el-button--info {
        background-color: $info-color;
        border-color: $info-color;
        color: #fff;

        &:hover,
        &:focus {
            background-color: $info-color-hover;
            border-color: $info-color-hover;
            color: #fff;
        }

        &.is-disabled {
            background-color: $color-disabled;
            border-color: $color-disabled;
            color: #fff;
            cursor: not-allowed;
            opacity: 1; // 确保颜色不被 Element Plus 默认的透明度覆盖
        }
    }

    /* 禁用状态下的样式（针对所有类型的按钮） */
    &:disabled,
    &.is-disabled {
        background-color: $color-disabled;
        border-color: $color-disabled;
        color: #fff;
        cursor: not-allowed;
        opacity: 1; // 覆盖 Element Plus 默认的透明度
    }


}

.action-button {
    @include action-button-style;
}

/* 按钮组样式 */
.button-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 10px;
}

.table-button {
    color: #7e63cd;
    font-size: 14px;
    /* 设置你想要的字体大小 */
    font-weight: bold;
    /* 设置字体加粗 */
}


.search-card {
    border-radius: 10px;

    .block {
        padding: 0px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .block:last-child {
        border-right: none;
    }

}


.pagination-container {
    display: flex;
    margin-top: 25px;
    justify-content: right;
    width: 100%;
    z-index: 1000;
}

.el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #868cf4;
    --el-border-radius-base: 8px;
    --el-text-color-primary: #fff;
    --el-segmented-item-hover-bg-color: #b2b5f0;
    display: flex;
    justify-content: flex-start;
    /* 左对齐 */
    width: 300px;
    margin-bottom: 20px;
}
</style>